Cocos Creator v2.2 自定义渲染组件及材质介绍

Original 刘航 COCOS 2022-06-10

Cocos Creator v2.2 已于 10 月 18 日正式发布，该版本对原生平台进行了大幅性能优化，同时在引擎层面也做了不少改动，包括 3D 模型渲染合批、大幅增强 TiledMap 支持等等，详细的版本改动可[点击这里]查看。

此外，Cocos Creator 2.2 版本基本同步了 Cocos Creator 3D 的材质系统，新版本的材质系统已趋于稳定，可以很方便地在编辑器中进行材质及 Effect 文件的创建及编写。相比之前的版本，v2.2 在渲染组件层面也有不少的差异。

Cocos 引擎开发工程师刘航，将为各位开发者详细介绍如何基于 Creator 2.2 版本进行渲染组件及材质的自定义。

讲师，刘航

一、渲染组件，Assembler 及材质

在引擎中，所有的渲染组件都是继承自 cc.RenderComponent，例如cc.Sprite，cc.Label 等。组件的 Assembler 主要负责组件数据的更新处理及填充，由于不同的渲染组件在数据内容及填充上也都不相同，所以每一个渲染组件都会对应拥有自己的 Assembler 对象，而所有的 Assembler 对象都是继承自 cc.Assembler。Material 作为资源，主要记录渲染组件的渲染状态，使用的纹理及 Shader。

二、自定义渲染组件及 Assembler

自定义渲染组件

自定义渲染组件需要继承 cc.RenderComponent 对象。cc.RenderComponent 有两个空方法必须要重写 _resetAssembler 及 _activeMaterial 方法。
_resetAssembler 在组件创建的时候会去调用，会在组件生命周期方法之前执行，主要负责创建并初始化渲染组件的 Assembler 实例。_activeMaterial 方法负责创建并设置渲染组件所使用的材质实例，会在组件启用及材质修改时调用。
另外，渲染组件有一系列控制渲染状态的方法：

markForRender 及 disableRender 控制渲染组件是否进行渲染
setVertsDirty 在渲染组件数据有更新时，设置标记
setMaterial 则是设置材质实例给渲染组件

自定义 Assembler

定义了自定义渲染组件之后，还需要定义对应的 Assembler。自定义的 Assembler 需继承cc.Assembler对象，cc.Assembler 有三个空方法必须要去重写：init，updateRenderData 及 fillBuffers。

init 负责初始化渲染数据及一些局部参数
updateRenderData 负责在渲染组件的顶点数据有变化时进行更新修改
fillBuffers 负责在渲染时进行顶点数据的 Buffer 填充

自定义材质及 Effect

Cocos Creator 2.2 版本的材质及 Effect 是作为资源存在，可以通过编辑器很方便快捷地进行新建操作，而不需要通过代码进行创建。

材质对象的层级结构如下图所示：每个材质对象都指向唯一的一个 Effect 对象，每个 Effect 对象可以拥有多个 Technique，每个 Technique 又可以创建多个 Pass，Pass 里就记录了 Blend 模式， Stencil Test 等渲染模式，所使用的 Shader 名字及 Shader 中使用的 Uniform 值。

在编辑器中选中材质资源，通过属性检查器对比材质的资源文件，可以看到具体的属性对应：

材质中通过 uuid 指定所使用的 Effect 资源，在编辑器中选中 Effect 资源，以 2d-sprite 为例，可以看到文件具体的内容，Effect 中主要有三部分：CCEffect，CCProgram vs 及 CCProgram fs。

CCEffect 即为前面介绍的材质对象结构中的内容，记录了渲染组件所有相关的渲染状态及 Uniform，这部分的语法及格式是基于 YAML，相比 JSON 书写更加简洁方便，详细的介绍可查阅[YAML官方文档]。

CCProgram vs 及 CCProgram fs 分别是顶点着色器及片元着色器，语法是标准的 GLSL 语法。

Effect 文件的编写可以使用 VS Code ，在编辑器中双击 Effect 文件会自动在 VS Code 中打开，另外 VS Code 的插件 Cocos Effect 也支持 Effect 文件的语法高亮。

Demo 示例

本文相关的自定义渲染组件及自定义 Assembler 的 Demo。

下载地址 :

https://github.com/cocos-creator/demo-shader

为了方便大家学习和参考如何进行材质的自定义及 Shader 的编写，Demo 中创建并移植了一些 Shader 的示例场景。例如：

基于 RenderTexture 的屏幕后处理示例：

简单的跟随点光源效果：